<template>
    <div>
        <el-row style="margin-bottom: 20px">
            <el-col :span="20">
                <el-row>
                    <!--                    <el-form>-->
                    <el-col :span="4">
                        <el-row>
                            <el-col :span="12" align="right">
                                <div class="table_legend table_legend_collected"></div>
                            </el-col>
                            <el-col :span="12" align="left">
                                <div class="table_legend_font">已采集</div>
                            </el-col>
                        </el-row>
                        <!--                            <el-form-item label="已采集" label-width="100px"><div style="width: 20px;height: 15px;border: 1px;background: blue"></div></el-form-item>-->
                    </el-col>
                    <el-col :span="4">
                        <el-row>
                            <el-col :span="12" align="right">
                                <div class="table_legend table_legend_time_out"></div>
                            </el-col>
                            <el-col :span="12" align="left">
                                <div class="table_legend_font">已超时</div>
                            </el-col>
                        </el-row>
                    </el-col>
<!--                    <el-col :span="4">-->
<!--                        <el-row>-->
<!--                            <el-col :span="12" align="right">-->
<!--                                <div class="table_legend table_legend_wait_collect"></div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12" align="left">-->
<!--                                <div class="table_legend_font">待采集</div>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                    </el-col>-->
<!--                    <el-col :span="4">-->
<!--                        <el-row>-->
<!--                            <el-col :span="12" align="right">-->
<!--                                <div class="table_legend table_legend_now"></div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12" align="left">-->
<!--                                <div class="table_legend_font">当前时期</div>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                    </el-col>-->
                    <el-col :span="4">
                        <el-row>
                            <el-col :span="12" align="right">
                                <div class="table_legend table_legend_wait_add"></div>
                            </el-col>
                            <el-col :span="12" align="left">
                                <div class="table_legend_font">待添加</div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="4">
                        <el-row>
                            <el-col :span="12" align="right">
                                <div class="table_legend table_legend_wait_delete"></div>
                            </el-col>
                            <el-col :span="12" align="left">
                                <div class="table_legend_font">已超时</div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <!--                    </el-form>-->
                </el-row>
            </el-col>
            <el-col :span="4" align="right">
                <el-button size="mini" type="primary" @click="backHome">返回主页</el-button>
            </el-col>
        </el-row>

        <table border="1" cellspacing="0" id="collect_table" class="noFocusDate">
            <tr>
                <th rowspan="2" colspan="2">进度/采集指标</th>
                <th rowspan="3">负责方</th>
                <th rowspan="3">次数</th>
                <th>4月</th>
                <th colspan="2">5月</th>
                <th colspan="4">6月</th>
                <th colspan="5">7月</th>
                <th colspan="4">8月</th>
                <th colspan="4">9月</th>
            </tr>
            <tr>
                <th>播种期</th>
                <th colspan="2">发芽期</th>
                <th colspan="2">幼苗期</th>
                <th colspan="3">发棵期</th>
                <th colspan="4">结薯期</th>
                <th colspan="8">成熟期</th>
            </tr>
            <tr>
                <th>指标类型</th>
                <th>指标名称</th>
                <th class="April">15-5</th>
                <th class="May">15-26</th>
                <th class="May">27-2</th>
                <th class="June">3-9</th>
                <th class="June">10-16</th>
                <th class="June">17-23</th>
                <th class="June">24-30</th>
                <th class="July">1-7</th>
                <th class="July">8-14</th>
                <th class="July">15-21</th>
                <th class="July">22-28</th>
                <th class="July">29-4</th>
                <th class="August">5-11</th>
                <th class="August">12-18</th>
                <th class="August">19-25</th>
                <th class="August">26-1</th>
                <th class="September">2-8</th>
                <th class="September">9-15</th>
                <th class="September">16-22</th>
                <th class="September">23-30</th>
            </tr>
            <tr v-for="(item) in tableList">
                <!--                <template v-for="target in item">-->
                <!--                <template v-for="items in item">-->
                <template v-for="target in item">
                    <template v-for="(value, index) in target">
                        <td v-if="!Number.isInteger(index)">{{value}}</td>

                        <td v-if="Number.isInteger(index)" v-bind:class="initColor(value,index)">
                            <el-popover placement="top-start"
                                        title="标题"
                                        width="200"
                                        trigger="hover"
                                        :disabled="popoverDisable(value)"
                                        content="这是一段内容,这是一段内容,这是一段内容,这是一段内容">
                                <div slot="reference" style="height: 100%;width: 100%"></div>

                            </el-popover>
                        </td>
                    </template>
                    <!--                    </template>-->
                    <!--                    <template v-for="value in item" v-if="index === 'value'">-->
                    <!--                        <td>{{value}}</td>-->
                    <!--                    </template>-->
                </template>
                <!--                    <template v-for="">-->
                <!--                        -->
                <!--                    </template>-->
                <!--                </template>-->
            </tr>
        </table>
    </div>

</template>

<script>
    import * as $ from 'jquery'

    export default {
        name: "task-all",
        data() {
            return {
                tableList: []
            }
        },
        watch: {
            tableList() {
                // let _this = this;
                this.$nextTick(function () {
                    this.initCSS();
                })
            }
        },
        mounted() {
            document.getElementById('side_bar').style.width = 100 + '%';
            this.initTableData();
        },
        methods: {
            initCSS() {
                let date = new Date();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                let tableDay = 0;
                let tableData = 0;
                switch (month) {
                    case 4:
                        if (day <= 30 && day >= 15) {
                            tableDay = 5;
                            tableData = tableDay - 2;
                        }
                        break;
                    case 5:
                        if (day >= 1 && day <= 5) {
                            tableDay = 5;
                            tableData = tableDay - 2;
                        } else if (day >= 15 && day <= 26) {
                            tableDay = 6;
                            tableData = tableDay - 2;
                        } else if (day >= 27 && day <= 31) {
                            tableDay = 7;
                            tableData = tableDay - 2;
                        }
                        break;
                    case 6:
                        if (day >= 1 && day <= 2) {
                            tableDay = 7;
                            tableData = tableDay - 2;
                        } else if (day >= 3 && day <= 9) {
                            tableDay = 8;
                            tableData = tableDay - 2;
                        } else if (day >= 10 && day <= 16) {
                            tableDay = 9;
                            tableData = tableDay - 2;
                        } else if (day >= 17 && day <= 23) {
                            tableDay = 10;
                            tableData = tableDay - 2;
                        } else if (day >= 23 && day <= 30) {
                            tableDay = 11;
                            tableData = tableDay - 2;
                        }
                        break;
                    case 7:
                        if (day >= 1 && day <= 7) {
                            tableDay = 12;
                            tableData = tableDay - 2;
                        } else if (day >= 8 && day <= 14) {
                            tableDay = 13;
                            tableData = tableDay - 2;
                        } else if (day >= 15 && day <= 21) {
                            tableDay = 14;
                            tableData = tableDay - 2;
                        } else if (day >= 22 && day <= 28) {
                            tableDay = 15;
                            tableData = tableDay - 2;
                        } else if (day >= 29 && day <= 31) {
                            tableDay = 16;
                            tableData = tableDay - 2;
                        }
                        break;
                    case 8:
                        if (day >= 1 && day <= 4) {
                            tableDay = 16;
                            tableData = tableDay - 2;
                        } else if (day >= 5 && day <= 11) {
                            tableDay = 17;
                            tableData = tableDay - 2;
                        } else if (day >= 12 && day <= 18) {
                            tableDay = 18;
                            tableData = tableDay - 2;
                        } else if (day >= 19 && day <= 25) {
                            tableDay = 19;
                            tableData = tableDay - 2;
                        } else if (day >= 26 && day <= 31) {
                            tableDay = 20;
                            tableData = tableDay - 2;
                        }
                        break;
                    case 9:
                        if (day === 1) {
                            tableDay = 20;
                            tableData = tableDay - 2;
                        } else if (day >= 2 && day <= 8) {
                            tableDay = 21;
                            tableData = tableDay - 2;
                        } else if (day >= 9 && day <= 15) {
                            tableDay = 22;
                            tableData = tableDay - 2;
                        } else if (day >= 16 && day <= 22) {
                            tableDay = 23;
                            tableData = tableDay - 2;
                        } else if (day >= 23 && day <= 30) {
                            tableDay = 24;
                            tableData = tableDay - 2;
                        }
                        break;
                    default:
                        break;
                }
                $('#collect_table tr:nth-child(3) th:nth-child(' + tableData + ')').css('background', '#D9D9D9');
                $('#collect_table tr td:nth-child(' + tableDay + ')').css('background', '#D9D9D9');
            },
            initTableData() {
                this.$http.post('/gengyun/GatherPlan/allList').then((res) => {
                    let _this = this;
                    let table = res.data.data;
                    let length = table.length;
                    for (let i = 0; i < length; i++) {
                        let tableItem = {
                            title: {
                                classify: '',
                                target: '',
                                responsibleParty: '',
                                num: ''
                            },
                            value: []
                        };
                        // if (table.[0].indicator_type)
                        tableItem.title.classify = table[i].indicator_type;
                        tableItem.title.target = table[i].indicator;
                        tableItem.title.responsibleParty = table[i].responsible_party;
                        tableItem.title.num = table[i].collect_number_sum;
                        tableItem.value = table[i].text;
                        this.tableList[i] = tableItem
                        _this.$set(_this.tableList, i, tableItem)
                    }
                }).catch((error) => {
                    console.log(error)
                })
            },
            initColor(value, index) {
                let className;
                // if (Nu) {
                if (value === 1) {
                    className = 'table_legend_collected'
                } else if (value === 0) {
                    className = ''
                } else if (value === 2) {
                    className = 'table_legend_wait_add'
                } else if (value === 3) {
                    className = 'table_legend_wait_delete'
                }
                // }

                return className;
            },
            backHome() {
                // this.initCSS();
                this.$router.push('/home/bar');
                document.getElementById('side_bar').style.width = 30 + '%'
            },
            popoverDisable(value) {
                return value === 0;
            }
        }
    }
</script>

<style scoped>
    /*.green {*/
    /*    background: #92D050 !important;*/
    /*}*/

    /*.white {*/
    /*    background: white;*/
    /*}*/

    /*.blue {*/
    /*    background: blue !important;*/
    /*}*/

    /*.red {*/
    /*    background: red !important;*/
    /*}*/

    #collect_table {
        width: 100%;
    }

    #collect_table tr th, #collect_table tr td {
        height: 10px;
        font-size: 8px;
    }

    .table_legend {
        width: 50px;
        height: 20px;
        background: blue;
        border: 1px;
    }

    .table_legend_font {
        font-size: smaller;
        font-weight: bolder;
    }

    .table_legend_collected {
        background: #92D050 !important;
    }

    .table_legend_time_out {
        background: #ffc6a9 !important;
    }

    .table_legend_now {
        background: #D9D9D9 !important;
    }

    .table_legend_wait_add {
        background: #1F497D !important;
    }

    .table_legend_wait_delete {
        background: #FF0000 !important;
    }

    .table_legend_wait_collect {
        background: #faff70 !important;
    }

    /*table tr td:nth-child(2) {color:red}*/

</style>
